<template>
    <div class="app-container">
        <div class="filter-container">
            <el-dialog
                title="编辑运营分类"
                :visible.sync="dialogVisible"
                width="700px"
                :before-close="handleClose">
                <div class="editGoodsGounp">
                  <el-form :rules="adDialogRules" ref="dialogForm" :model="ad" label-position="right" label-width="120px" class="demo-ruleForm" style='width: 100%;'>
                    <el-form-item :label="adDialogTitles.nameEn" prop="nameEn">
                      <el-input v-model="ad.nameEn" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.imageCn" prop="imageCn">
                      <el-upload
                        multiple
                        :name="uploadFileName"
                        :limit="1"
                        :headers="headers"
                        accept="image/jpeg,image/gif,image/png"
                        :file-list="imgListCn"
                        :action="uploadFileUrl"
                        :on-remove="(file, fileList) => { return handleUploaderRemoveCn(file, fileList) }"
                        :on-success="handleGoodsDetailUploadSuccessCn"
                        :before-upload="onBeforeUpload"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                        <div class="el-upload__tip" slot="tip">大小2M以下；支持jpg、jpeg、png；只能上传一张图片。</div>
                      </el-upload>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.nameCn" prop="nameCn">
                      <el-input v-model="ad.nameCn" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.imageEn" prop="imageEn">
                      <el-upload
                        multiple
                        :name="uploadFileName"
                        :limit="1"
                        :headers="headers"
                        accept="image/jpeg,image/gif,image/png"
                        :file-list="imgList"
                        :action="uploadFileUrl"
                        :on-remove="(file, fileList) => { return handleUploaderRemove(file, fileList) }"
                        :on-success="handleGoodsDetailUploadSuccess"
                        :before-upload="onBeforeUpload"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                        <div class="el-upload__tip" slot="tip">大小2M以下；支持jpg、jpeg、png；只能上传一张图片。</div>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="makeSure()">确 定</el-button>
                </span>
            </el-dialog>
            <article>
              <el-table border :data="dataList">
                <el-table-column prop="nameEn" label="分类英文名称" align="center" min-width="200px" >
                </el-table-column>
                <el-table-column prop="nameCn" label="分类中文名称" align="center" min-width="200px" >
                </el-table-column>
                <el-table-column label="中文分组图片" align="center" min-width="200px">
                  <template slot-scope="scope">
                    <el-popover placement="top-start" trigger="hover">
                      <img :src="scope.row.imageCn" class="previewImage">
                      <img :src="scope.row.imageCn" class="thumbnail" slot="reference">
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="英文分组图片" align="center" min-width="200px">
                  <template slot-scope="scope">
                    <el-popover placement="top-start" trigger="hover">
                      <img :src="scope.row.imageEn" class="previewImage">
                      <img :src="scope.row.imageEn" class="thumbnail" slot="reference">
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" min-width="200px">
                    <template slot-scope="scope">
                        <el-button plain type="primary" size="mini" @click="toDditProduct(scope.row)">编辑</el-button>
                        <el-button plain type="primary" size="mini" @click="toLinkGdOperatione(scope.row)">商品管理</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
            </article>
        </div>
    </div>
</template>
<script>
import list from '@/mixins/List'
import listPagination from '@/components/ListPagination'
import {
  listOperate, updateOperate
} from '@/api/classification'
export default {
  name: 'screenAdList',
  mixins: [list],
  data () {
    return {
      dataList: [],
      imgList: [],
      imgListCn: [],
      uploadFileUrl: `${process.env.VUE_APP_UPLOAD_API}`,
      uploadFileName: `${process.env.VUE_APP_UPLOAD_NAME}`,
      dialogVisible: false,
      productsOperate: {},
      types: '',
      headers: this.$headers,
      ad: {
        nameEn: '',
        imageEn: '',
        imageCn: '',
        nameCn: ''
      },
      adDialogTitles: {
        nameEn: '英文广告标题：',
        imageEn: '英文广告图：',
        nameCn: '中文广告标题：',
        imageCn: '中文广告图：'
      },
      adDialogRules: {
        nameEn: [{ required: true, message: '英文标题不能为空', trigger: 'change' }],
        imageEn: [
          { required: true, message: '英文图片不能为空', trigger: 'change' }
        ],
        nameCn: [
          { required: true, message: '中文标题不能为空', trigger: 'change' }
        ],
        imageCn: [
          { required: true, message: '中文图片不能为空', trigger: 'change' }
        ]
      }
    }
  },
  components: {
    listPagination
  },
  watch: {

  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () { // 列表
      let { data } = await listOperate({
        pageNum: this.page,
        pageSize: this.pageSize,
        type: 1
      })
      this.dataList = data
      this.total = this.dataList.length
    },
    toDditProduct (row) {
      console.log(row)
      if (this.$refs['dialogForm'] !== undefined) {
        this.$nextTick(() => {
          this.$refs['dialogForm'].clearValidate()
        })
      }
      this.imgList = []
      this.imgListCn = []
      if (row.imageEn !== '') {
        this.imgList = [{ name: 'imageEn', url: row.imageEn }]
      }
      if (row.imageCn !== '') {
        this.imgListCn = [{ name: 'imageCn', url: row.imageCn }]
      }
      this.ad.nameEn = row.nameEn
      this.ad.nameCn = row.nameCn
      this.ad.imageEn = row.imageEn
      this.ad.imageCn = row.imageCn
      this.ad.id = row.id
      this.dialogVisible = true
    },
    makeSure () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          updateOperate(this.ad).then(res => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$message.success('编辑成功')
              this.getList()
            }
          })
        }
      })
    },
    toLinkGdOperatione (row) {
      this.$router.push({
        path: 'goodOperation',
        query: {
          operateId: row.id
        }
      })
    },
    onBeforeUpload (file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
      }
      return isIMAGE && isLt2M
    },
    handleUploaderRemove (file, fileList, activeUploader, index) {
      this.ad.imageEn = ''
    },
    handleUploaderRemoveCn (file, fileList, activeUploader, index) {
      this.ad.imageCn = ''
    },
    handleGoodsDetailUploadSuccess (response, file, fileList) {
      this.ad.imageEn = response.data
      this.$message({ message: '上传成功', type: 'success' })
    },
    handleGoodsDetailUploadSuccessCn (response, file, fileList) {
      this.ad.imageCn = response.data
      this.$message({ message: '上传成功', type: 'success' })
    },
    toAddAdvertisement () {
      this.fatheraddAdvertiseman = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
    .editGoodsGounp {
      width: 100%;
      height: auto;
      padding: 20px 0;

    }
</style>
